<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <title>Extension Installed Successfully</title>
    <style>
      /* Your custom styles can go here if needed */
    </style>
  </head>

  <body class="bg-gray-100 h-screen flex flex-col justify-center items-center">
    <div
      class="bg-white shadow-md rounded-lg p-8 max-w-2xl mx-auto text-center"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        class="w-16 h-16 mx-auto text-green-500"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M5 13l4 4L19 7"
        ></path>
      </svg>
      <h1 class="text-3xl font-semibold mt-4">
        Extension Installed Successfully
      </h1>
      <p class="text-gray-600 mt-2">
        Thank you for installing our Chrome extension. Enjoy enhanced browsing!
      </p>
      <div class="mt-6 space-y-4">
        <a
          href="https://mubaidr.js.org"
          class="text-blue-500 hover:underline"
        >
          Visit Extension Website
        </a>
      </div>
    </div>
  </body>
</html>
